<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css基础选择器</title>
    <style>
        /* 
            网页元素都是盒子
            给相应标签添加样式 选择标签
                标签选择器
                    html标签名作为选择器 p span a
                类选择器class  开发最常用 短横线分隔-
                    单独选择一个或者某几个标签
                        .类名 {
                            属性
                        }
                        使用 <p class='类名'></p>
                    多类名 类名之间用空格分隔
                      class='类名1  类名2 ...'
                id选择器
                        通过html的id属性选择标签 #nav
                通配符选择器 选取页面的所有元素 特殊情况使用
                 * {

                 }
            */
            p {
                /* 标签选择器 */
                color: green;
            }
            .red {
                /* 类选择器 */
                color: red;
            }
            .fontsize {
                font-size: 20px;
            }
            .star-sy {
                /* color: rebeccapurple; */
            }
            .d1 {
                background-color: red;
            }
            .d2 {
                background-color: green;
            }
            .siz {
                width: 200px;
                height: 200px;
            }
            #four {
                /* id选择器 */
                color: blue;
            }
            * {
                color: palegreen;
            }
    </style>
</head>

<body>
    <div id="root">
        <p>标签选择器</p>
        <p class="red">标签选择器</p>
        <p>标签选择器</p>
        <ul>
            <li class="star-sy">1</li>
            <li class="red fontsize">2</li>
            <li>3</li>
            <li id="four">4</li>
        </ul>
        
      <div class="d1 siz"></div>  
      <div class="d2 siz"></div>  
      <div class="d1 siz"></div>  
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                t1: Mock.mock('@cword(10)'),
            }
        },
    })
</script>

</html>